<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>






  
  
  
  
  
  <link type="text/css" rel="stylesheet" href="./css/template.css">






  
  
  
  
  
  <link type="text/css" rel="stylesheet" href="./css/SyntaxHighlighter.css">






  
  
  
  
  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">





  


  
  
  
  
  
  
  
  
  
  <title>How to choose your java graphic interface</title>
  <script language="javascript" src="./js/shInit.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shCore.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushCpp.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushCSharp.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushCss.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushDelphi.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushJava.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushJScript.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushPhp.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushPython.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushRuby.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushSql.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushVb.js"></script>
  
  
  
  
  
  <script language="javascript" src="./js/shBrushXml.js"></script>
  <keywords></keywords>
</head>


<body>






graphic interface, GUI, Matisse, Visual Editor, L&eacute;onardi,
SwingX <author>Maxime VIALETTE</author>
<div class="chapter">
<h2>Introduction</h2>






<p>In an&nbsp;application, the graphic part is as important as the
treatment part, because it is the most visible part for the user.
Application without a user friendly interface won't be used. We will see
which Java libraries&nbsp;we will use to do the interface, and some tools,
open source or commercial that you can use.</p>






</div>






<div class="chapter">
<h2>Graphics libraries</h2>






<p class="MsoNormal" style="line-height: normal;">Nowadays,&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">the
major parts of graphic development in Java are based on Swing</span>. You probably know&nbsp;AWT (Abstract Windowing Toolkit),<span style="font-weight: bold;"> </span>ancestor<span style="font-weight: bold;"> </span>of Swing appeared on the&nbsp;1.0&nbsp;Java version. This graphic API is compliant with
every Java versions including Java Mobile Edition. These
components are known as "heavy" because they are drowned and control by
the system, not by Java. <span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">That&rsquo;s why AWT don&rsquo;t use many&nbsp;</span><span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">resources</span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">, but it&rsquo;s old and makes it
difficult to use layer architecture.<o:p></o:p></span></p>







<p>The MVC pattern (model-view-controller)
can't be follow with AWT. It is limited by components common with all systems. You have to customize them often. AWT is still a good choice for limited systems.</p>






<p>In order to succeed AWT, Sun has developed the Swing library.
Respecting the&nbsp;view-control architecture, Swing is a complete
standard. Most important aspect, Swing components are light (drew by
Java2D and controlled by Java only). This characteristic which hit the
goal "Write
once, run everywhere" have several drawbacks: component lack of aesthetics, the render might seems low, etc.
Swing consumes a lot of memory but is it as low as they say? Coded in
pure Java and doesn't use any native function, it is normal that it's
not as&nbsp;fast as a native operating system graphic API. But
computer power rapidly evolving, this is less and less a problem.
The choice to draw directly throw&nbsp;Java2D is at the same time
the strength and the weakness of
Swing: portability of the same code,
independently of the destination platform, is made possible by Swing,
however, the counterpart of this portability is a lack of reactivity of
graphic Java Applications.&nbsp;The user is often frustrated when using
the application, for a few tenths of a second latency reflecting the
very architecture of Swing. This impression is caused by
example a mouse click, if this click do something that takes time like
a network access you have to deal with threads in order to prevent the
interface to freeze and get refresh problem. Java 6 has done&nbsp;a real leap forward to help programmers cancel this effect.
Many other new features in Java Swing: the "look &amp; feel" have been
improved because the look in previous version wasn't good without using
specialize library like JGoodies (API LGPL) which help that improves
the rendering of graphical objects.</p>






<p>If you want to mix&nbsp;AWT and Swing components, you have to know
that it's very difficult to do this even if the syntax is
close.&nbsp;The objects are superimposed, the problem lies in their
nature:&nbsp;AWT
component (heavy) will be always under Swing components (light) because
the virtual machine will draw AWT components before
Swing one. This problem is solved in Java
6: so it's not recommended to have both AWT and Swing components
in the same window until Java 5.</p>






<p> Swing application: Aerith <img src="./images/aerith.jpg"> </p>






<p><span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">Let&rsquo;s
compare AWT and Swing. </span><span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">The
API SWT is placing on the user despite portability.</span> <span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">Indeed,
this library (initially developed by IBM under open source license) has a
native part</span> It will permit to realize fast interface by using a
majority of native component of different operating system you want to
deploy your application. This library can also draw non existing
graphic component on a platform. Often,<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US"> users
think that Java applications </span> develop with SWT is a native program. &nbsp;In developer
side and without using JFace,<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US"> SWT
is not as pleasant to code as Swing</span>,&nbsp;Especially for those accustomed to Swing because the basic
principles are not the same.&nbsp;Due to the native party,
the&nbsp;Java "garbage collector" is no more ... Parents objects are in
charge of freeing the memory of their children when we suppress
them.&nbsp;Now back on Jface:&nbsp;Respecting the MVC
architecture, it improves the code that makes it easier to
maintain.&nbsp;It makes more sense to compare with Swing SWT + JFace
(for advance controls you&nbsp;will&nbsp;still have&nbsp;to code SWT
part).</p>






<p>Since neither standard nor independent of the operating system, the
appearance is different depending on platform. We have to maintain as
many versions as systems; we lost one of the great advantages of Java.</p>






<div id="result_box" dir="ltr">Among the problems SWT, some of them are
solved by the new API SwingWT. It covers Swing at 90% and brings a bridge
between these two worlds. A Swing developer can code using the Swing
syntax and then compile with SwingWT (Simply replace the packages Swing
by SwingWT). The application will use SWT during its execution. In
addition, a program written for Swing can be compiled in SWT. But,
thanks to the SWTSwing API, we now have the bridge in the opposite
direction. In this case, a SWT program can use for his display SWT or
Swing without any recompilation.</div>






<p> SWT application: Azureus <img src="./images/azureus.jpg"> </p>






<p>Now that we have see advantages and drawbacks of each API, you will
be able to choose precisely the API that will fit your
requirement.&nbsp;Java Mobile developer and Applets will surely pick
AWT. Swing is a good choice for big portable project easy to maintain.
As for SWT it's will be perfect for small and big development or to
prove that a Java interface can be as responsive as a C interface.
Finally SwingWT and
SWTSwing&nbsp;may be a way to reconcile the whole world and enjoy all the advantages of Swing and SWT...</p>






<div class="subChapter">
<h3>SwingX</h3>






<p>SwingX, stand for Swing eXtension, is a part of a project
develop by SwingLabs, in order to create and integrate rapidly new
component in our application. SwingX is based on&nbsp;Swing library,
one of the most used graphic API.</p>






<p>It contains Swing&nbsp;graphic extension interface and integrate
new components which provide feature required by "rich client"
application
(an application connected to a an application server as a web browser
but with a more advance interface compare to traditional HTML).</p>






<p>Some of code and concept of this project will be probably integrated into future Java platform.</p>






<p>Some of most important new features:</p>






<ul>






  <li>sort ;</li>






  <li>filtering&nbsp;;</li>






  <li>highlight element in tables ;</li>






  <li>three ;</li>






  <li>list;</li>






  <li>seek/find&nbsp;;</li>






  <li>Auto completion&nbsp;;</li>






  <li class="MsoNormal" style="line-height: normal;"><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">Login / an </span><span style="" lang="EN-US">Authentication</span><span style="font-size: 12pt; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">
     framework&nbsp;;</span></li>
  <li>Tree Table component ;</li>






  <li>Panel component can be set to invisible&nbsp;;</li>






  <li>calendar component&nbsp;;</li>






  <li>"Tip-of-the-Day" component.</li>






</ul>






Here some example of SwingX component:
<ul>






  <li> Calendar
    
    
    
    
    
    <p>We can create a calendar in order to pick a date. It's will be
display as an ordinal&nbsp;JTextField with a button on the side and the
calendar will be display&nbsp;when a&nbsp;user click on this button.</p>






    <img src="./images/calendrier.jpg"> </li>






  <li>Auto completion
    
    
    
    
    
    <p>Auto completion will be display when someone starts to enter a
text in the field and this field will&nbsp;Auto complete itself. It's
the case in many software, for example during the choice of an
application language.</p>






    <img src="./images/completion.jpg"> </li>






  <li>Auto completion on a JTextField and a Jlist</li>






  <li>Advice panel
    
    
    
    
    
    <p>The JXTipOfTheDay component makes it possible to display a tip
dialog that will be display at the launch of the application. You just
have to create a&nbsp;"Tips" base and display them thanks to
a&nbsp;JDialog.</p>






  </li>






</ul>






</div>






</div>






<div class="chapter">
<h2>Eclipse RCP</h2>








<p>Eclipse RCP (Rich Client Platform) is a major revolution in the
conception of Java graphic interface. Fully integrated within
Eclipse, this tool enables you to create projects plug-in for Eclipse,
and also standalone window&nbsp;applications.&nbsp;Of course, each
project being a plug-in, you can reuse it in any other application
based on RCP.</p>




<p>By using Eclipse RCP, you will be able to create SWT/JFace
application. The interest is, as mentioned above, as the graphics
components are native to the operating system (in the case where OS
support them), otherwise they are drawn in Java2D, as if Swing was
used. This allows high performance. Another advantage in using Eclipse
RCP is to be based on the&nbsp;Eclipse modular&nbsp;architecture: you
can so define tabs, the system of moveable views, perspectives<span style="font-weight: bold; color: rgb(255, 0, 0);"><span style="color: rgb(0, 0, 0);">,</span> <span style="color: rgb(0, 0, 0); font-weight: bold;"></span></span><span style="color: rgb(0, 0, 0); font-weight: bold;"></span><span style="font-weight: bold;"></span>text editors, etc. In a visual point of view, one of the most
strength of this API is PLAF (Pluggable Look n&rsquo; feel) that will
permit the developer to create his own look n&rsquo; feel.</p>






<p> Nevertheless, this tool is quite complex for advance use, but it is
trying to be corrected over the versions because it will help the
development&nbsp;considerably by taking advantage of contributions made
to Eclipse. Here a very simple example of what can we do:&nbsp;RCP
application with an integrated&nbsp;plug-in. <img src="./images/rcp.jpg"> </p>






<p>For more information, you can consult the "Programmez! N&deg; 84 et
85 (March and April 2006)" magazine or visit the following article: <a href="http://www.labo-sun.com/resource-fr-articles-1185-1-eclipse-eclipse-eclipse-rcp.htm" target="_blank">Eclipse RCP</a> </p>






</div>






<div class="chapter">
<h2>L&eacute;onardi</h2>






<p>We are&nbsp;now going to see a product that enables you to develop rapidly and simply a&nbsp;<span style="font-weight: bold; color: rgb(255, 0, 0);"></span>man-machine interface thanks to&nbsp;Leonardi product. This product will be suitable for both
beginners not familiar with IHM modeling tool and experimented users
that want to take advantage of the power of&nbsp;Leonardi. Indeed,
this product edit by&nbsp;Lyria company ( <a href="http://www.lyria.com/" target="_blank">www.lyria.com</a>)
is a&nbsp;framework Model-Driven that will permit the development of
features&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">independently
</span> of the platform and so to automate the development
of light client (web based application), heavy (local graphic
applications) or riches (compromise between light and heavy
client).&nbsp;We
can therefore make any changes in the client easily, which is
enabled by the fact that the engine produces a description Leonardi XML
of views (<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">independently
</span> of the display) towards targets
(SWT, Swing, Eclipse RCP) which we discussed earlier.&nbsp;In
addition, there are about fifty pre-implemented actions that can be
used at will and that we will not need to recode, saving time.</p>




<p> </p>






<p>Let's talk about the product installation. First, notice that they
are 4 versions. The free version which come from the open source
Leonardi product and that support all project based on open source
technology.</p>






<p>We have several commercial versions corresponding to different types
of needs: &laquo;&nbsp;agile&nbsp;&raquo; version is used for short
project with fast development and also for prototype or models; there is also the&nbsp;&laquo; evolution &raquo; version&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">essentially
</span> used for migration of old business application.
At last, the most advanced version: the
&laquo;&nbsp;factory&nbsp;&raquo;, is dedicated to complex projects
based on a long &nbsp;period of development with successive structured
steps, and following a&nbsp;conception, implementation,
deployment, maintenance type and evolution of
applications. When you have made your choice with the best version
concerning your need, you will have to install it. In order to achieve
that, you have two possibility: setup only the Eclipse's plug-in or
install the Leonardi Stand-alone Studio product, which is a&nbsp;third
part application.</p>






<p>It is very simple to install the Eclipse plug-in, you just have to
create a new project, then going to the Plug-in development tab then
select the Plug-in from existing JAR archives option. On the new
windows that will display, we click on&nbsp;Add External then we select
the studio.jar file that is in the previously downloaded and extract
from the lyria website ( <a href="http://www.lyria.com/page_complete.php3%20id_rubrique=15" target="_blank">Lyria</a> ). You can also use the Lyria setup wizard that will install the Leonardi Studio
on tour computer. The installation follows a classic schema of an
ordinary program, no need to configure anything. Here an example&nbsp;Leonardi&nbsp;Studio development&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">environment</span>. <imh src="http://www.lyria.com/IMG/png/studio_navigation_tree.png">
</imh></p>






<p>When the installation process is finished, you can familiarize
yourself thanks to this tutorial: Check the "Programmez" number 89
(September 2006).</p>






<p>Let's talk about advantages and drawbacks in using&nbsp;Leonardi product. You should know that&nbsp;projects lead to a&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">functional
</span> and
technical problem which specification is long, developer have to master
the delay and cost of their works. Thanks to Leonardi, it's now
possible, besides the fact that you gain time and therefore cost during the process of&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">upgrading
</span> and modernizing old applications, design de developments<span style="font-size: 11pt; line-height: 115%; font-family: &quot;Calibri&quot;,&quot;sans-serif&quot;;" lang="EN-US">
</span> on strong architecture particularly on the V
cycle, which enable you to check at every steps the specification
conformity of the previous step&nbsp;specifications&nbsp;according to this model:  <img src="http://upload.wikimedia.org/wikipedia/fr/0/05/Cycle_de_developpement_en_v.jpg">and
also to master the separation between coding the graphical
interface and the code which "dress". Unfortunately, all this has a
cost and the Leonardi product's cost a lot. You have to spend
9&nbsp;000&euro; without taxes for the
&laquo;&nbsp;evolution&nbsp;&raquo; version and
12&nbsp;000&euro; without taxes for
the&nbsp;&laquo;&nbsp;factory&nbsp;&raquo; one. </p>






<ul>






Leonardi Product: <li>Prerequisite&nbsp;: JVM 1.4+</li>






  <li>the + :&nbsp;Adaptability</li>






  <li>Scalability</li>






  <li style="color: rgb(0, 0, 0);">Mastery</li>






  <li>the - : Price</li>






</ul>






</div>






<div class="chapter">
<h2>WYSIWYG tools</h2>






<p>The time where we spend long hour of developing a graphical
interface (SWING or other) is now over, we found now in an integrated
development environment&nbsp; ( IDE ) tools in order to help the
creation of&nbsp; graphical user interface (GUI). With Java we have at
least two&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">combinations</span>: Eclipse with Visual Editor and
Netbeans including&nbsp;Matisse. You will be able to add any graphical
component (windows, text-field, button, scrolling text, tree view,...)
in just one click.</p>






<div class="subChapter">
<h3>Visual Editor</h3>






<p> Visual Editor is a&nbsp;plug-in in order to code SWING and AWT
interfaces with&nbsp;Eclipse. You can download the plug-in here: <a href="http://www.eclipse.org/vep/WebContent/main.php" target="_blank">http://www.eclipse.org/vep/WebContent/main.php</a>.
When you finish downloading Visual Editor,
extract it in the Eclipse folder. This tool has several windows making
the development easier. By default, the first window is a&nbsp;WYSIWYG
(What You See Is What You Get) editor which permit you to build the
application by simple drag and drop. The second window is a view of
the source code of the application.
Then, we have two more views: the
&laquo; Java Beans &raquo; view which represents the hierarchy of the
GUI and the &laquo; properties &raquo; view which help you to edit a
component properties. </p>






<p>By default&nbsp;SWT application
don't use layout manager, contrary to applications that use Swing BorderLayout. If you choose a <em>null</em> layout then you can place your components as you like. But, components won't be resize, you have to manage resizing if you wish</p>






<p>Visual Editor contains dependences from other Eclipse plug-in: EMF (Eclipse Modeling
Framework) and GEF (Graphical Editing Framework). EMF is a Java code
generator for application based on a structure pattern. It helps you to
transform rapidly your pattern in&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">efficient
</span> code. For example, when you
drag a component of type button in the JavaBeans view,
the button code will be generated automatically in the source code view.</p>






<p> Concerning GEF, it uses the &laquo;
org.eclipse.draw2d &raquo; plug-in. That one provides a disposition and a render tool kit in order to display graphics.
GEF enable you to create graphics,&nbsp;Visual Editor is build on this plug-in in order to do the render of a specific view of your application. <img src="./images/gef.jpg"> </p>






</div>






<div class="subChapter">
<h3>Matisse</h3>






<p>Matisse is the name given to NetBeans visual editor. It makes it
easy to place easily your components, you provide virtual rule in order
to optimize the space between component and the alignment between them.
Matisse frees the developer about the complexity of Swing layout
manager. The developer use a intuitive visual conceptionintuitive tool&nbsp;in order to produce easily a professional GUI, and Matisse will produce the correct implementation by using a layout manager. </p>






<p>It's composed by several views: a conception area, an &laquo; inspect &raquo; view, a palette and a&nbsp;"properties" view.
The conception&nbsp;is a main window of creation and modification of
forms and of the Java graphic interface. The switch button
between&nbsp;Source and Design of the toolbar permit you to display
the&nbsp;source code for a class or the graphical components of the
interface. The additional buttons&nbsp;allow speedy access to the most frequently used commands (enable of selection mod or connection, alignment of the components, definition of automatic resizing and thumbnail forms). The inspector view is a tree view representation of, visual and non visual, of all your application's components. </p>






<p>Inspector also notices component being edit in the interface generator and allows you to organize the components in the parts available. The palette is a list of customizable components, having tabs dedicated to&nbsp;JFC/Swing,
AWT components and JavaBeans with available managers. The property
window display properties of the selected component in the interface
generator, and also in the inspector windows, Projects and Files.</p>






<p> Matisse works with an additional JAR named swing-layout-x.xjar
where x.x stands for the library version. This JAR contains the
"revolutionary" layout called Free Design. This is a dynamic
position&nbsp;model. So, interfaces' component created remain still
perfectly identical when they are execute, your modifications&nbsp;taken into account
without any incidence on the define relation within components. That
you'll resize the form where you specify a different aspect,
the&nbsp;interface will be&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">adapted
</span> automatically in order to take in account of the target&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">mismatch
</span> appearance. The drawback is that if the&nbsp;layout is not
compliant with the standard you will have to include a JAR associate to
your layout with your application. If the developer wants to see his
IHM
in another IDE, he won't be able to do that. When you deploy your
application be careful that the swing-layout-x.x.jar JAR is in your
classpath. This will avoid any surprise when you the application will
be launch. <img src="./images/netbeans.jpg">
</p>






</div>






<p> Matisse or Visual Editor offers a similar design tool. We find the same views of an interface to another.<span style="font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;"> </span><span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">The difference
is between the&nbsp;</span><span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">management
</span><span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US"> of the components disposition</span> For Visual
Editor, the developer will have to choose the layout
he wants to use. If the layout is <em>null</em>,
don't forget to manage the resize of components. But if you develop
with Matisse, you don't have to ask yourself concerning the layout.
Finally,
we can have the situation where the developer wants to improve his own
GUI. If he started it on Eclipse, he won't have any problem&nbsp;<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">switching
</span> on Matisse, but the contrary don't work (<span style="font-size: 12pt; line-height: 115%; font-family: &quot;Times New Roman&quot;,&quot;serif&quot;;" lang="EN-US">except
</span> if you don't wish to have graphic interface visualization). </p>






</div>






<div class="chapter">
<h2>Conclusion</h2>






<p>As you can see, they are several ways to create you graphic
interface.
In order to choose which libraries and tools to use, you have to think
about performance, about portability and improvement of your code.&nbsp;Furthermore,
as we have pointed out above, certain tools are very powerful, but
expensive. You have to define according your own needs.</p>






</div>






</body>
</html>
